<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		body{
			margin: 0px;
		}
			.bg{
				width: 1238;height:620px;
				background-color: cadetblue;
				
			}
			.logo{
				margin: 0 auto;
				width: 200px;height: 200px;
				border-radius: 100px 100px;
				background-color: white;
				position:relative;
				position: relative;top: 50px;
	       }
	        .logo1{
	        	width: 200px;height: 200px;
	        	background: url(img/单反3.jpg);
	        	border-radius: 100px 100px;     /*尖角圆弧化*/
	            background-position-x:-60px;   /*定位x轴*/
	            border:2px solid white;
	            position: relative;top: 50px;
	            position:fixed; z-index:999;   /*置顶*/
	        }
					
			.z{
				width: 50px;height: 350px;
				background-color:mediumorchid;
				position: relative;top: 170px;left: 27px;
				border-radius: 0px 40px;  position: relative;
				
			}		
			.z1{
				width: 50px;height: 350px;
				background-color: limegreen;
				position: relative;top: -180px;left: 77px;
				border-radius: 0px 0px;  position: relative;
			}		
			.z2{
				width: 50px;height: 350px;
				background-color:  burlywood;
				position: relative;top: -530px;left: 127px;
				border-radius: 40px 0px;  position: relative;
			}		
			.shuli{
				font-size: 20px;color: white;
				font-family;
				margin: 0 auto;
			    width: 20px;
				line-height: 24px;
			}
			.logo1:hover{
				left: 575px;
				-webkit-transform:scale(1.2)/*缩放*/;
			-webkit-transform: rotate(360deg) scale(1.2) ;
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="logo" >
			<div class="logo1"></div>
			<div class="z"><br/><br/><div class="shuli">姓名<br /><br />张德围</div></div>
				<div class="z1"><br/><br/><div class="shuli">年龄<br /><br />19</div></div>
					<div class="z2"><br/><br/><div class="shuli">职业<br /><br />程序员</div></div>
				
			
			
			</div>
		</div>
	</body>
</html>
